<!DOCTYPE html>
<html>

<head>
  <title>Food detail</title>
  <meta charset="utf-8">
</head>

<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <canvas style="visibility: hidden;" id="canvas_crop"></canvas>
  <input type="color" />
  <button onclick="lock()">锁定</button>

  <button onclick="crop()">剪切</button>
  <button onclick="reverse()">水平翻转</button>
  <button onclick="cloneHandle()">复制</button>
  <button onclick="upAndDown()">层级</button>
  <button>变形</button>
  <button>滤镜</button>
  <button>抠图</button>
  <script src="public/js/fabric.js"></script>
  <script>
    var canvas = new fabric.Canvas('canvas');
    canvas.preserveObjectStacking = true;

    var rect = new fabric.Rect({
      top: 100,
      left: 100,
      width: 60,
      height: 70,
      fill: 'red'
    });
    rect.statefullCache = true;
    canvas.add(rect);

    // canvas.item(0).set({
    //   borderColor: 'red',
    //   cornerColor: 'green',
    //   cornerSize: 6,
    //   transparentCorners: false
    // });
    // canvas.setActiveObject(canvas.item(0));
    // this.__canvases.push(canvas);

    var green = new fabric.Rect({
      top: 100,
      left: 100,
      width: 60,
      height: 70,
      fill: 'green'
    });

    canvas.add(green);

    fabric.Image.fromURL('/public/img/804.png', function (oImg) {
      canvas.add(oImg);
      // oImg.filters.push(new fabric.Image.filters.Convolute({
      //   matrix: [0, -1, 0,
      //     -1, 5, -1,
      //     0, -1, 0]
      // }));
      // oImg.applyFilters();

    });
    // canvas.deactivateAll().renderAll();

    function upAndDown() {
      let cob = canvas.getActiveObject();
      canvas.bringForward(cob)
    }
    function lock() {
      let cob = canvas.getActiveObject();
      cob.lockMovementX = !cob.lockMovementX
      cob.lockMovementY = !cob.lockMovementY;
      cob.lockRotation = !cob.lockRotation;
      cob.lockScalingFlip = !cob.lockScalingFlip;
      cob.lockScalingX = !cob.lockScalingX;
      cob.lockScalingY = !cob.lockScalingY;
      cob.lockUniScaling = !cob.lockUniScaling;
    }

    //剪切
    var el, lastActive, cob;
    var selection_object_left = 0;
    var selection_object_top = 0;
    var isCropping = false;

    function crop() {
      canvas.remove(el);

      if (canvas.getActiveObject()) {
        cob = canvas.getActiveObject();
        if (cob.type === 'sprite') {
          alert("所选对象不可裁剪。");
          return;
        } else {
          if (lastActive !== cob) {
            console.log('different object');
          } else {
            console.log('same object');
          }
          if (lastActive && lastActive !== cob) {
            lastActive.clipTo = null;
          }

          //生成一个和待裁剪元素相同大小的矩形用于框选裁剪区域
          el = new fabric.Rect({
            fill: 'rgba(0,0,0,0)',
            originX: 'left',
            originY: 'top',
            stroke: '#ccc',
            //strokeDashArray: [2, 2],
            strokWidth: 5,
            //opacity: 1,
            width: 1,
            height: 1,
            borderColor: '#36fd00',
            cornerColor: 'green',
            hasRotatingPoint: false,
            selectable: true
          });

          el.left = cob.left;
          selection_object_left = cob.left;
          selection_object_top = cob.top;
          el.top = cob.top;
          el.width = cob.width * cob.scaleX;
          el.height = cob.height * cob.scaleY;
          canvas.add(el);
          canvas.setActiveObject(el);
        }
        isCropping = true;
      } else if (isCropping) {
        var left = el.left - cob.left;
        var top = el.top - cob.top;

        left *= 1;
        top *= 1;

        var width = el.width * 1;
        var height = el.height * 1;

        //将当前帧导出到一个新的canvas中并执行裁剪，在此期间暂停记录历史记录。
        cropImage(cob, el.left, el.top, parseInt(el.scaleY * height), parseInt(width * el.scaleX));

        disabled = true;

        canvas.remove(cob);
        canvas.remove(canvas.getActiveObject());
        lastActive = cob;
        canvas.renderAll();

        isCropping = false;
      }

      function cropImage(png, left, top, height, width) {
        //将图片放进一个新的canvas中，经裁剪后导出一个新的图片。
        //如果用户选框大于原图片，则将选框缩至原图片大小
        if (top < png.top) {
          height = height - (png.top - top);
          top = png.top;
        }
        if (left < png.left) {
          width = width - (png.left - left);
          left = png.left;
        }
        if (top + height > png.top + png.height * png.scaleY)
          height = png.top + png.height * png.scaleY - top;
        if (left + width > png.left + png.width * png.scaleX)
          width = png.left + png.width * png.scaleX - left;

        var canvas_crop = new fabric.Canvas("canvas_crop");

        fabric.Image.fromURL(canvas.toDataURL('png'), function (img) {
          img.set('left', -left);
          img.set('top', -top);
          canvas_crop.add(img)
          canvas_crop.setHeight(height);
          canvas_crop.setWidth(width);
          canvas_crop.renderAll();
          fabric.Image.fromURL(canvas_crop.toDataURL('png'), function (croppedImg) {
            croppedImg.set('left', left);
            croppedImg.set('top', top);
            canvas.add(croppedImg).renderAll();
          });
        });
      }

    }
    //clone
    function cloneHandle() {
      let c = canvas.getActiveObject();
      var copyData = c.toObject();
      fabric.util.enlivenObjects([copyData], function (objects) {
        objects.forEach(function (o) {
          o.set('top', o.top + 15);
          o.set('left', o.left + 15);
          canvas.add(o);
        });
        // canvas.renderAll();
      });
    }

    //亮度、对比度、饱和度、清晰度、色彩、透明度

    //reverse
    function reverse() {
      let c = canvas.getActiveObject();
      if (c) {
        c.set('scaleX', -1);
        c.setCoords();
        canvas.renderAll();
      }
    }
  </script>
</body>

</html>